<template v-if="infoData">
  <div class="chat-info-container" v-for="(item, index) in infoData" :key="item.id">
    <TimeMessage :timer="infoData[index]?.time"
      v-if="index === 0 || infoData[index]?.time - infoData[index - 1]?.time > 1000 * 60 * 3"></TimeMessage>
    <div :class="item.isMe ? 'chat-info-right' : 'chat-info-left'">
      <div class="chat-message"
        :class="[item.isMe ? 'chat-info-item-right' : 'chat-info-item-left', (load && index === infoData.length - 1) ? 'load' : '']">
        {{ item.value }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, watch } from 'vue'
import { scrollBottom } from '@/utils/chat.js'
import TimeMessage from './chat-type/time-message.vue'

const props = defineProps({
  infoData: {
    type: Array,
    default: () => []
  },
  load: {
    type: Boolean,
    default: false
  }
})

// 加载完毕时滚动到最底部
onMounted(() => {
  setTimeout(() => {
    scrollBottom()
  }, 600);
})

// 当有新消息（包括自己），并且滚动距离小于80px，则滚到最底部
watch(() => props.infoData, () => {
  let chatInfo = document.querySelector(".chat-info");
  if (chatInfo.scrollHeight - (chatInfo.offsetHeight + chatInfo.scrollTop) <= 80) {
    setTimeout(() => scrollBottom())
  }
}, { deep: true })

</script>

<style lang="scss" scoped>
.chat-info-container {
  --message-bg: #24292F;
  user-select: auto;

  .chat-name {
    color: #333;
    margin: 0 4px;
    font-size: 14px;
  }

  .chat-info-left,
  .chat-info-right {
    margin-bottom: 20px;

    .chat-message {
      color: #efefef;
      background-color: var(--message-bg);
      user-select: text;
      text-align: left;
      display: inline-block;
      word-break: break-word;
      position: relative;
      padding: 6px 12px;
      border-radius: 14px;
      font-size: 14px;
      min-height: 20px;
    }

    .chat-info-item-left::before {
      content: '';
      position: absolute;
      z-index: -1;
      bottom: -11px;
      left: 0px;
      display: inline-block;
      width: 0px;
      height: 0px;
      border: 5px solid transparent;
      border-top: 12px solid var(--message-bg);
      transform: rotate(32deg);
    }

    .chat-info-item-right::before {
      content: '';
      position: absolute;
      z-index: -1;
      bottom: -10px;
      right: 0px;
      display: inline-block;
      width: 0px;
      height: 0px;
      border: 5px solid transparent;
      border-top: 12px solid var(--message-bg);
      transform: rotate(312deg);
    }
  }

  .chat-info-left {
    text-align: left;
  }

  .chat-info-right {
    text-align: right;
    margin-right: 5px;
  }

  @keyframes load_animation {

    0%,
    100% {
      box-shadow: 0px 0px 8px 1px rgb(186, 66, 255), 0px -1px 8px 0px rgb(0, 225, 255);
    }

    25% {
      box-shadow: 8px 0px 8px 1px rgb(186, 66, 255), -8px -1px 8px 0px rgb(0, 225, 255);
    }

    50% {
      box-shadow: 8px 8px 8px 1px rgb(186, 66, 255), -8px -8px 8px 0px rgb(0, 225, 255);
    }

    75% {
      box-shadow: 0px 8px 8px 1px rgb(186, 66, 255), -1px -8px 8px 0px rgb(0, 225, 255);
    }
  }

  .load {
    position: relative;
    transition: all 0.5s;

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 14px;
      content: "";
      width: 100%;
      height: 100%;
      box-shadow: 0px 0px 8px 1px rgb(186, 66, 255), 0px -1px 8px 0px rgb(0, 225, 255);
      animation: load_animation 3s infinite;
    }
  }
}
</style>
